<template>
<div>
    <button @click="startRecognition">开始录音</button>
    <button @click="stopRecognition">停止录音</button>
    <div v-if="recognitionText">{{ recognitionText }}</div>
</div>
</template>

<script setup>
import { ref } from 'vue';

const recognitionText = ref('识别中...');
let recognition;
let audio;

const startRecognition = () => {
    recognition = new webkitSpeechRecognition()
    recognition.continuous = true
    recognition.interimResults = true
    recognition.lang = 'zh-CN'

    recognition.addEventListener('result', (e) => {
        let finalTranscript = ''
        let interimTranscript = ''
        for (let i = e.resultIndex; i < e.results.length; i++) {
            let transcript = e.results[i][0].transcript
            if (e.results[i].isFinal) {
                finalTranscript += transcript
            } else {
                interimTranscript += transcript
            }
        }
        recognitionText.value = finalTranscript + interimTranscript
    })

}
</script>
